<template>
  <b-col class="mt-2 rounded-lg shadow">
    <b-row v-for="(article,index) in articleList.data" :key="article.id" align-v="end" class="border-bottom bg-white news py-2 px-1" :class="{'rounded-top':index==0}">
      <b-col class="col-auto">
        <b-row class="pl-2">
          <b-img-lazy fluid blank-color="#838383" class="rounded-lg border" height="128px" width="228px" :src="article.cover" />
        </b-row>
      </b-col>
      <b-col>
        <!-- 标题 和 热度-->
        <b-row>
          <b-col @click="toDetail(article.id)" style="font-size:22px;font-family:HYZhengYuan-85S">
            <b-link class="text-decoration-none text-dark">
              {{article.title}}
            </b-link>
          </b-col>
        </b-row>
        <!-- 内容简要 -->
        <b-row>
          <b-col @click="toDetail(article.id)">
            <p class="content overflow-hidden mb-1">
              {{article.content.replace(/<[^>]+>/gi,"")}}
            </p>
          </b-col>
        </b-row>
        <!-- 时间 -->
        <b-row>
          <b-col style="font-size:14px;color:#3c3c3c;font-family:HYZhengYuan-55S">
            {{getTime(article.time)}} · {{article.zone}}
          </b-col>
          <b-col class="col-auto">
            <b-row class="pr-3">
              <span class="iconfont icon-browse mr-2" style="font-size:14px;color:#3c3c3c;font-family:HYZhengYuan-55S;">{{article.view}}</span>
              <span class="iconfont icon-comment" style="font-size:14px;color:#3c3c3c;font-family:HYZhengYuan-55S;">{{article.commentNum}}</span>
            </b-row>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <b-row v-if="loading" align-v="end" class="py-2 px-1">
      <b-col class="h-100 text-center">
        <b-spinner md /> 加载中
      </b-col>
    </b-row>
    <b-row v-if="loading" style="height:800px" />
    <b-row v-if="isAll&&loading==false" align-v="end" class="bg-white py-2 px-1 rounded">
      <b-col class="text-center">
        Σ(っ °Д °;)っ这就到底了!
      </b-col>
    </b-row>
  </b-col>
</template>

<script>
import tool from '@/utils/tool';
import { nanoid } from 'nanoid';
export default {
  data() {
    return {
      // 文章数据
      articleList: {
        data: [],
      },
      //已到底部
      isAll: false,
      //加载 这个变量很重要 因为我不会用axios做拦截这个变量可以卡一下后面的请求
      loading: true,
    }
  },
  methods: {
    //跳转到详情
    toDetail(id) {
      this.$pageRedirect.toADDetails(id, "article");
    },

    //生成唯一id
    createId() {
      return nanoid(4);
    },

    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },

    //加载新内容
    loadingMore() {
      if (this.articleList.page * this.articleList.size >= this.articleList.total) {
        this.isAll = true;
        this.loading = false;
        return
      }
      this.loading = true;
      //获取下一页
      this.$httpIssue.getArticle(this.articleList.page + 1).then((res) => {
        var newData = this.articleList.data;
        for (let i = 0; i < res.data.length; i++) {
          newData.push(res.data[i]);
        }
        this.articleList = res;
        this.loading = false;
        this.articleList.data = newData;
        // console.log(this.articleList.page);
      });

    },

    //监听滚动条
    scrolling() {
      var scrollTop = tool.getScrollTop();
      var clientHeight = tool.getClientHeight()
      var scrollHeight = tool.getScrollHeight()
      // console.log("滚动条:", scrollTop, "\n", "可视容器", clientHeight, "\n", "滚动条高度:", scrollHeight, "\n", "位置+高度:", scrollTop + clientHeight);
      if (scrollTop + clientHeight >= scrollHeight - 1 && this.loading == false) {
        this.loadingMore();
      }
    },

  },
  mounted() {
    // 添加监听事件
    window.addEventListener("scroll", this.scrolling);
  },
  created() {
    //获取数据库文章信息
    this.$httpIssue.getArticle(1).then((res) => {
      if (res == "timeOut") {
        this.loading = false;
        this.isAll = true;
        return
      }
      this.articleList = res;
      this.loading = false;
    });
  },
  destroyed() {
    // 销毁监听事件
    window.removeEventListener("scroll", this.scrolling);
  }
}
</script>

<style scoped>
.content {
  font-size: 14px;
  color: rgb(99, 99, 99);
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* 要显示的行数 */
  -webkit-box-orient: vertical;
  height: 65px;
}
.content:hover {
  color: #838383;
  cursor: pointer;
}
.news:hover {
  cursor: default;
}
</style>